<template>
  <div class='container'>
    <!-- 弹出框 -->
    <el-dialog title="题目预览" :visible="dialogVisible" width="50%" :before-close="handleClose">
      <div>
        <el-row>
          <el-col :span="6">【题型】：{{ll.questionType}}</el-col>
          <el-col :span="6">【编号】：{{ll.number}}</el-col>
          <el-col :span="6">【难度】：{{formDifficulty}}</el-col>
          <el-col :span="6">【标签】：{{ll.tags}}</el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="6">【学科】：{{ll.subjectName}}</el-col>
          <el-col :span="6">【目录】：{{ll.directoryName}}</el-col>
          <el-col :span="6">【方向】：{{ll.direction}}</el-col>
          <el-col :span="6"></el-col>
        </el-row>
        <hr />
        <el-row>
          <el-col :span="24">【题干】:</el-col>
        </el-row>
        <el-row>
          <div v-html="ll.question" style="margin-top:10px"></div>
        </el-row>
        <el-row>
          <el-col :span="24" style="margin-bottom:10px">{{formQuestionType}}选项（选中的选项为正确答案）：</el-col>
        </el-row>
        <el-row>
          <el-radio-group v-model="isChoice" v-if="ll.questionType==1">
            <el-radio v-for="item in ll.options" :key="item.id" :label="item.isRight" :disabled='item.isRight===isChoice? false:true' style="display: block;margin:5px 0">{{item.code}}</el-radio>
          </el-radio-group>
          <el-checkbox-group v-model="checkList" v-if="ll.questionType==2">
            <el-checkbox v-for="item in ll.options" :key="item.id" :label="item.isRight">{{item.code}}</el-checkbox>
          </el-checkbox-group>
          <el-divider></el-divider>
        </el-row>
        <hr />
        <el-row>
          <span>【参考答案】：</span>
          <el-button type="danger" size="small" @click="showvideo=true">视频答案预览</el-button>
        </el-row>
        <el-row>
          <video :src="ll.videoURL" controls muted style="margin-top: 10px" v-if="showvideo" />
        </el-row>
        <hr />
        <el-row>
          <el-col :span="24">【答案解析】：</el-col>
        </el-row>
        <el-row>
          <div v-html="ll.answer " style="margin-top:10px"> </div>
        </el-row>
        <hr />
        <el-row>
          <el-col :span="24">【题目备注】：{{ll.remarks}}</el-col>
        </el-row>
      </div>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {

  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    ll: {
      type: Object
    },
    questionType: {
      type: Array
    },
    difficulty: {
      type: Array
    },
    option: {
      type: Array
    }

  },
  data () {
    return {
      // 答案标志位
      isChoice: 1,
      // 视频显示
      showvideo: false,
      checkList: []
    }
  },
  methods: {
    // 关闭弹框
    handleClose () {
      this.$emit('update:dialogVisible', false)
    }
  },
  computed: {
    // 题型
    formQuestionType () {
      const info = this.questionType.find(item => parseInt(item.value) === parseInt(this.ll.questionType))
      return info ? info.label : '其他'
    },
    formDifficulty () {
      const info = this.difficulty.find(item => parseInt(item.value) === parseInt(this.ll.difficulty))
      return info ? info.label : '其他'
    }
  }
}
</script>

<style scoped >
.dialog-footer {
  text-align: right;
}
</style>
